<!--
 * @Description: 逾期节点编辑和查看
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-02-17 16:27:06
 * @LastEditTime: 2023-04-10 15:57:02
 * @FilePath: \cscec-pms-admin\src\views\construction\overdueNodeManagement\components\MasterPlan\detail\index.vue
-->
<template>
  <base-breadcrumb :title="$route.meta.title" :breadcrumb="!isAudit">
    <a-card>
      <title-name title="基本信息" />
      <custom-form ref="form" :is-validate="true" :edit-model="''" :form="form" :form-list="formOption" :is-emit="false">
        <template v-for="item in formOption" v-slot:[item.keyName]="scoped">
          <slot v-if="item.slot" :name="item.keyName" v-bind="scoped" />
        </template>
      </custom-form>
    </a-card>
    <a-card>
      <title-name title="历史逾期信息" />
      <a-table rowKey="id" :columns="detailColumns" :data-source="list" :loading="infoLoading" bordered>
        <template slot="periodDelayFileList" slot-scope="text, record">
          <lTable :businessCode="'PM51'" :upload-arrys="record.periodDelayFileList" :isClose="false" />
        </template>
        <template slot="typeName" slot-scope="text, record">
              {{record.typeName || record.reason}}
        </template>
        <template slot="operation" slot-scope="text, record, index">
          <MoreButton>
            <a v-if="hideBuquBtn() && ['DRAFT', 'REJECTED'].includes(record.auditStatus) && $route.query.type === 'update'" @click="handleEdit(record, index)">编辑</a>
            <!-- <a v-if="record.auditStatus !== 'DRAFT'" @click="$bus.$emit('showApprovalDetailsDialog', id + '_overdue')">审批信息</a> -->
          </MoreButton>
        </template>
      </a-table>
    </a-card>
    <!-- 节点预警信息编辑模态框 -->
    <UpdateInfo :visible.sync="infoVisible" :data="infoData" @refresh="getData" />
    <!-- 节点预警信息编辑模态框 -->
    <div class="pub-header-btn page-btn-right-top">
      <a-button v-if="$route.query.type === 'update' && !isAudit" :loading="submiting" type="primary" @click="handleSubmit">
        提交
      </a-button>
      <a-button v-checkVisibleInDetail v-if="!isConsultation" @click="$close">
        关闭
      </a-button>
    </div>
    <!-- 提交审批 -->
    <selectApprover :businessId="businessId" :processConfig="setProcessConfig"></selectApprover>
    <!-- 提交审批 -->
  </base-breadcrumb>
</template>
<script>
import overdueNodeManagement from '@/api/construction/overdueNodeManagement'

import { detailFormOption, detailColumns, nodeStatusList } from '../model.js'
import UpdateInfo from '../updateInfo.vue'

export default {
  name: 'overdueNodeManagementMasterPlanOperation',
  components: {
    UpdateInfo
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否作为意见征询
    isConsultation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单项
      formOption: {},
      // 表单对象
      form: {},
      // 节点预警信息加载
      loading: false,
      // 节点预警信息列表
      list: [],
      // 节点预警信息表头
      detailColumns: [],
      // 节点预警信息编辑模态框显示隐藏
      infoVisible: false,
      // 节点预警信息编辑模态框数据
      infoData: {},
      // 节点预信息加载
      infoLoading: false,
      // 提交中
      submiting: false,
      // 获取流程配置值
      processConfig: null,
      // 点击提交发送流程配置值
      setProcessConfig: null,
      // 业务id
      businessId: null,
      id: ''
    }
  },
  created() {
    this.formOption = detailFormOption
    this.detailColumns = detailColumns.filter(el=>el.dataIndex!=='periodDelayFileList')  
  },
  async mounted() {
    this.id = this.$route.query.id.split('_')[0]
    //获取通过获取流程配置值
    this.processConfig = await this.$getConfigFn('overdue_node')
    this.getData()
  },
  methods: {
    /**
     * @description: 获取页面数据
     * @return {void}
     */
    getData() {
      this.infoLoading = true
      this.$set(this, 'list', [])
      overdueNodeManagement
        .detail(this.id)
        .then(res => {
          if (res.code === this.SUCCESS_CODE) {
            this.form = res.data
            const key = ['isMilestonesNode', 'isKeyNode', 'isContractDurationNode']
            key.forEach(el => {
              if (this.form.hasOwnProperty(el)) {
                this.form[el] = this.form[el] ? '是' : '否'
              }
            })
            if (this.form.hasOwnProperty('nodeStatus')) {
              this.form.nodeStatus = nodeStatusList.find(el => el.value == this.form.nodeStatus)?.label || ''
            }
            this.$set(this, 'list', res.data?.nodeWarningList)
          }
        })
        .finally(() => {
          this.infoLoading = false
        })
    },
    /**
     * @description: 编辑
     * @param {object} record 行数据
     * @param {number} index 索引
     * @return {void}
     */
    handleEdit(record, index) {
      this.infoVisible = true
      this.infoData = {
        id: this.id,
        // 不可选择早于或等于上一次预警信息的“调整后计划完成时间”；若是第一次预警信息，则不可选择早于或等于该节点的“计划完成时间”
        lastTime: this.list.length > 1 ? this.list[index + 1].adjustCompletionTime : this.form.planEndTime,
        list: record,
        contractEndDate: this.form.contractEndDate
      }
    },
    /**
     * @description: 提交
     * @return {void}
     */
    handleSubmit() {
      //非空校验
      if (
        this.list.every(el => {
          return ['typeId', 'adjustCompletionTime', 'measure'].every(item => {
            return (el[item] ?? '') !== ''
          })
        })
      ) {
        this.submiting = true
        this.setProcessConfig = null
        this.submitApprovalConfirm(this.processConfig, flag => {
          if (!flag) {
            this.submiting = false
            return
          }
          overdueNodeManagement
            .submitApproval({
              auditStatus: 'SUBMITTED',
              id: this.id
            })
            .then(res => {
              if (res.code === this.SUCCESS_CODE) {
                this.businessId = this.id + '_overdue'
                this.setProcessConfig = this.processConfig
              }
            })
            .finally(() => {
              this.submiting = true
            })
        })
      } else {
        this.$message.warning('请填写预警信息')
      }
    }
  }
}
</script>
<style lang="less" scoped></style>
